<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<div style="width: 1080px;">
	<form class="layui-form layui-form-pane" id="OrderForm">
		<div class="layui-form-item">
			<div class="layui-inline" style="display: flex; align-items: center;">
				<div class="layui-input-inline" style="width: 60px">
					<label>订单编号</label>
				</div>
				<div class="layui-input-inline">
					<input type="text" name="orderId" autocomplete="off"
						class="layui-input" placeholder="留空查全部"">
				</div>
				<div class="layui-input-inline" style="width: 60px">
					<label>起&#8195;&#8195;点</label>
				</div>
				<div class="layui-input-inline">
					<input type="text" name="startSta" autocomplete="off"
						class="layui-input" placeholder="留空查全部" value="${startStations }">
				</div>
				<div class="layui-input-inline" style="width: 60px">
					<label>终&#8195;&#8195;点</label>
				</div>
				<div class="layui-input-inline">
					<input type="text" name="endSta" autocomplete="off"
						class="layui-input" placeholder="留空查全部" value="${endStations }">
				</div>
			</div>
			<div class="layui-inline" style="display: flex; align-items: center;">
				<div class="layui-input-inline" style="width: 60px">
					<label>下单用户</label>
				</div>
				<div class="layui-input-inline">
					<input type="text" name="username" autocomplete="off"
						class="layui-input" placeholder="留空查全部">
				</div>
				<div class="layui-input-inline" style="width: 60px">
					<label>发车日期</label>
				</div>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test1"
						placeholder="留空查全部" name="data" value="${data }">
				</div>
				<div class="layui-input-inline" style="width: 60px">
					<label>订单状态</label>
				</div>
				<div class="layui-input-inline">
					<select name="orderState">
						<option value="">请选择</option>
						<option value="已支付">已支付</option>
						<option value="未支付">未支付</option>
					</select>
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn" type="button" id="btn">查询</button>
				</div>
			</div>
		</div>
	</form>
	<table class="layui-table" style="text-align: center;">
		<colgroup>
			<col width="180">
			<col width="100">
			<col width="180">
			<col width="100">
			<col width="100">
			<col width="180">
			<col width="80">
			<col width="90">
			<col width="70">
		</colgroup>
		<c:choose>
			<c:when test="${not empty OrderList }">
				<thead>
					<tr>
						<th style="text-align: center">订单编号</th>
						<th style="text-align: center">用户名</th>
						<th style="text-align: center">下单时间</th>
						<th style="text-align: center">起点</th>
						<th style="text-align: center">终点</th>
						<th style="text-align: center">发车时间</th>
						<th style="text-align: center">金额</th>
						<th style="text-align: center">状态</th>
						<th style="text-align: center">操作</th>
					</tr>
				</thead>
			</c:when>
			<c:otherwise>
				<h1>没有符合条件的数据可以显示！</h1>
			</c:otherwise>
		</c:choose>
		<tbody>
			<c:forEach items="${OrderList }" var="item" varStatus="status">
				<tr>
					<td>${item.orderId }</td>
					<td>${item.user.username }</td>
					<td><fmt:formatDate value="${item.createTime}"
							pattern="yyyy-MM-dd hh:mm:ss" /></td>
					<td>${item.startStation }</td>
					<td>${item.endStation }</td>
					<td><fmt:formatDate value="${item.startData}"
							pattern="yyyy-MM-dd hh:mm:ss" /></td>
					<td>${item.amount }</td>
					<td>${item.orderState }</td>
					<td><button class="layui-btn layui-btn-primary layui-btn-sm"
							onclick="javascript:confirmDelete(this);"
							data-id="${item.orderId }">
							<i class="layui-icon">&#xe640;</i>
						</button></td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
	<c:choose>
		<c:when test="${not empty OrderList }">
			<div id="demo2"></div>
		</c:when>
	</c:choose>
</div>
<script>
layui.form.render('select');
laydate.render({
    elem: '#test1'
  });
	//layui.laypage.render({
		//elem: 'demo2'
		//,count: ${pageInfo.total}
		//,curr:${pageInfo.pageNum}
		//,groups:5
		//,limit:${pageInfo.pageSize}
		//,jump: function(obj,first){
		//	if(!first){
	    //		loadPage("order/showOrder?pageNum=" + obj.curr);
		//	}
		//}
	//}); 
	  //完整功能
	  layui.laypage.render({
	    elem: 'demo2'
	    ,count: ${pageInfo.total}
	    ,curr:${pageInfo.pageNum}
	    ,limit:${pageInfo.pageSize}
	   ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
	    ,jump: function(obj,first){
	    	if(!first){
	    	    		loadPage("order/showOrder?pageNum=" + obj.curr+ "&pageSize=" + obj.limit,$("form").serialize());
	    	}
	    }
	  });
	$("#btn").click(function() {
		loadPage("order/showOrder", $("#OrderForm").serialize());
	});
	function confirmDelete(that) {
		var othis = $(that)
		layui.layer.confirm('真的要删除这个订单吗?', {
			icon : 3,
			title : '警告'
		}, function(index) {
			var orderId = othis.data('id');
			loadPage("order/del?orderId=" + orderId);
			layui.layer.close(index);
		});
	}
</script>